<script setup>
import { ref } from 'vue';
import { useTodosStore } from '../store';
const todos = useTodosStore();

/* 
1. 绑定 v-model
2. 绑定 @keydown.enter 事件 / 在keydown事件中判断 e.key === 'Enter'
3.actions添加数据
 a. id 使用 +new Date() 时间戳即可
 b. 使用 unshift 方法添加到第一项
 c. 子组件判断 value 值，有内容才添加,添加完后变为 ''
*/
const name = ref('');
const add = () => {
  if (name.value) {
    todos.add(name.value);
    name.value = '';
  } else {
    alert('内容为空');
  }
};
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model.trim="name"
      @keydown.enter="add"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>

<style lang="less" scoped></style>
